// 初始化画板
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
// 获取颜色DOM
let aColorBtn = document.getElementsByClassName('color')
// 获取画笔DOM
let brush = document.getElementById('brush')
// 获取橡皮擦DOM
let eraser = document.getElementById('eraser')
// 获取清空DOM
let empty = document.getElementById('clear')
// 获取撤回DOM
let undo = document.getElementById('undo')
// 获取保存DOM
let save = document.getElementById('save')
// 默认线宽
lWidth = 4
// 记录每一步操作
let historyDeta = []

// 画布
autoSetSize(canvas)
// 画笔
listenmouse(canvas)
// 颜色
getColor()

/*******************************************/
// 设置画板宽高
function autoSetSize(canvas) {
  canvasSetSize()

  function canvasSetSize() {
    let pageWidth = document.documentElement.clientWidth
    let pageHeight = document.documentElement.clientHeight

    canvas.width = pageWidth
    canvas.height = pageHeight
  }
  // 窗口大小改变时重新获取画板宽高
  window.onresize = function () {
    canvasSetSize()
  }
}

// 监听鼠标
function listenmouse(canvas) {
  // 记录鼠标状态
  let painting = false
  // 记录鼠标位置
  let lastPoint = { x: undefined, y: undefined }

  // 判断是否移动端
  if (document.body.ontouchstart !== undefined) {
    canvas.ontouchstart = function (e) {
      this.firstDot = ctx.getImageData(0, 0, canvas.width, canvas.height) //在这里储存绘图表面
      saveData(this.firstDot)
      painting = true
      let x = e.touches[0].clientX
      let y = e.touches[0].clientY
      lastPoint = { x: x, y: y }
      ctx.save()
      drawCircle(x, y, 0)
    }
    canvas.ontouchmove = function (e) {
      if (painting) {
        let x = e.touches[0].clientX
        let y = e.touches[0].clientY
        let newPoint = { x: x, y: y }
        drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y)
        lastPoint = newPoint
      }
    }
    canvas.ontouchend = function () {
      painting = false
    }
  } else {
    // 鼠标按下事件
    canvas.onmousedown = function (e) {
      //在这里储存绘图表面
      this.firstDot = ctx.getImageData(0, 0, canvas.width, canvas.height)
      saveData(this.firstDot)
      painting = true
      let x = e.clientX
      let y = e.clienty
      lastPoint = { x: x, y: y }
      drawCircle(x, y, 0)
    }
    //鼠标移动事件
    canvas.onmousemove = function (e) {
      if (painting) {
        let x = e.clientX
        let y = e.clientY
        let newPoint = { x: x, y: y }
        drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y)
        lastPoint = newPoint
      }
    }
    //鼠标松开事件
    canvas.onmouseup = function () {
      painting = false
    }
  }

  // 画点函数
  function drawCircle(x, y, radius) {
    ctx.save()
    ctx.beginPath()
    ctx.arc(x, y, radius, 0, Math.PI * 2)
    ctx.fill()
  }
  // 划线函数
  function drawLine(x1, y1, x2, y2) {
    ctx.lineWidth = lWidth
    ctx.lineCap = 'round'
    ctx.lineJoin = 'round'

    ctx.moveTo(x1, y1)
    ctx.lineTo(x2, y2)
    ctx.stroke()
    ctx.closePath()
  }
}

// 颜色选择
function getColor() {
  for (let i = 0; i < aColorBtn.length; i++) {
    aColorBtn[i].onclick = function () {
      for (let i = 0; i < aColorBtn.length; i++) {
        aColorBtn[i].classList.remove('active2')
        this.classList.add('active2')
        activeColor = this.id
        ctx.fillStyle = activeColor
        ctx.strokeStyle = activeColor
      }
    }
  }
}

// 画笔工具的点击响应事件
brush.onclick = function () {
  this.classList.add('active1')
  eraser.classList.remove('active1')
  // 获取被选定的颜色节点
  let selectColor = document.querySelector('.active2')
  ctx.fillStyle = selectColor.id
  ctx.strokeStyle = selectColor.id
}

// 橡皮擦的点击响应事件
eraser.onclick = function () {
  this.classList.add('active1')
  brush.classList.remove('active1')
  ctx.fillStyle = 'white'
  ctx.strokeStyle = 'white'
}

// 清空画布的点击响应事件
empty.onclick = function () {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
}

// 调整笔刷粗细
range.onchange = function () {
  lWidth = this.value
}

// 保存的点击响应事件
save.onclick = function () {
  // 把图画转换为图片
  let imgUrl = canvas.toDataURL('image/png')
  // 使用a标签自带的下载
  let saveA = document.createElement('a')
  document.body.appendChild(saveA)
  saveA.href = imgUrl
  saveA.download = 'Online Sketchpad' + new Date().getTime()
  saveA.target = '_blank'
  saveA.click()
}

// 最多储存10步
function saveData(data) {
  historyDeta.length === 10 && historyDeta.shift()
  historyDeta.push(data)
}
// 撤回的点击响应事件
undo.onclick = function () {
  if (historyDeta.length < 1) return false
  ctx.putImageData(historyDeta[historyDeta.length - 1], 0, 0)
  historyDeta.pop()
}
